<template>
  <div class="yxp-course">
    <div class="yxp-composition-top">
      <div class="back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">语音流畅性训练</div>
      <div class="yxp-top-r">
        <span class="right-text-item" @click="handleChangeModel(0)">要点解读</span>
        <span class="right-text-item" @click="handleChangeModel(1)" v-if="!isBuffer">查看模型</span>
      </div>
    </div>
    <div class="yxp-scene-main">
      <div class="main-box">
        <div class="main-box-item" v-if="!isVoice">
          <div class="buffer" v-if="isBuffer">
            <div class="buffer-item">
              <div class="buffer-item-l">
                <!-- <span class="sss" v-show="voice >= 1" ></span> -->
                <span v-show="voice >= 2"></span>
                <span v-show="voice >= 3"></span>
                <span v-show="voice >= 4"></span>
                <span v-show="voice >= 5"></span>
                <span v-show="voice >= 6"></span>
                <span v-show="voice >= 7"></span>
                <span v-show="voice >= 8"></span>
                <span v-show="voice >= 9"></span>
                <span v-show="voice >= 10"></span>
              </div>
              <div class="buffer-item-r">
                <!-- <span v-show="voice >= 1" ></span> -->
                <span v-show="voice >= 2"></span>
                <span v-show="voice >= 3"></span>
                <span v-show="voice >= 4"></span>
                <span v-show="voice >= 5"></span>
                <span v-show="voice >= 6"></span>
                <span v-show="voice >= 7"></span>
                <span v-show="voice >= 8"></span>
                <span v-show="voice >= 9"></span>
                <span v-show="voice >= 10"></span>
              </div>
            </div>
            <div class="buffer-btn" @click="realTimeAsrStop">完成录音</div>
          </div>
          <div class="content">
            <div class="content-wrap retell-box">
              <h3 class="work-title">【写作要求】</h3>
              <div class="work-info" v-html="content.require"></div>
            </div>
            <div class="record" @click="realTimeAsrOpen">
              <div class="record-item">
                <img src="@/assets/composition/record-icon.png" />
                <p class="record-item-text">开始英文测评</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="main-box-item read-box" v-if="isVoice">
          <div class="content">
            <div class="content-wrap">
              <div class="read-quite">
              <div class="read-quite-item">
                <span class="num">{{voiceRad.fluency}}<em>%</em></span>
                <div class="text">
                  <img src="@/assets/composition/read-icon1.png" />流畅度
                </div>
              </div>
              <div class="read-quite-item">
                <span class="num">{{voiceRad.full}}<em>%</em></span>
                <div class="text">
                  <img src="@/assets/composition/read-icon2.png" />完整度
                </div>
              </div>
              <div class="read-quite-item">
                <span class="num">{{voiceRad.correct}}<em>%</em></span>
                <div class="text">
                  <img src="@/assets/composition/read-icon3.png" />准确度
                </div>
              </div>
            </div>
            <!--play-->
            <div class="read-play">
              <div class="read-play-item">
                <div class="left-item">
                  <img src="@/assets/composition/myvideo-pause.png" v-if="!playing" @click="handlePlay(1)"/>
                  <img src="@/assets/composition/myvideo-play.png" v-if="playing" @click="playVoice('pause')" />
                  我的录音
                </div>
                <div class="left-item">
                  <img src="@/assets/composition/myvideo-pause.png" v-if="!defaultPlaying" @click="handlePlay(2)"/>
                  <img src="@/assets/composition/myvideo-play.png" v-if="defaultPlaying" @click="playVoice('pause')"/>
                  原文读音
                </div>
              </div>
              <div class="read-play-item">
                <div class="right-item">
                  <span class="dot"></span>
                  <span class="text">读的太好了</span>
                </div>
                <div class="right-item">
                  <span class="dot"></span>
                  <span class="text">有一点小错误</span>
                </div>
                <div class="right-item">
                  <span class="dot"></span>
                  <span class="text">读的不太好哦</span>
                </div>
              </div>
            </div>
            <!--content-->
            <div class="read-main">
              <div v-if="!isPlay">
                <template>
                <template v-if="articleType === 1 || articleType === 5 || articleType === 2">
                  <span :style="{display: 'block', width: '100%'}">
                    <template v-for="(item,i) in headArr">
                      <template v-if="!item.word">
                      </template>
                      <template v-else-if="item.word.includes('##')">
                        <br :key="'h' + i + 'br'">
                      </template>
                      <template v-else-if="item.word.includes('&&')">
                        <span class="article-wrod" :key="'h' + i" v-html="item.word.replace('&&', '')" :style="{color: item.isColor, marginLeft: '40px'}"></span>
                      </template>
                      <template v-else>
                        <span class="article-wrod" :key="'h' + i" v-html="item.word" :style="{color: item.isColor}"></span>
                      </template>
                    </template>
                  </span>
                  <!-- <template v-for="(item,i) in enText">
                    <span :key="'z' + i"  v-if="i === 0" :style="{display: 'block',color: '#333',color: item.isColor}">{{item.word}}</span>
                    <span :key="'z' + i"  v-if="i > 0 && i < enText.length - 1" :style="{'margin-left': item.isStart === 0 ? '40px' : 0,color: item.isColor}" v-html="item.word"></span>
                    <span :key="'z' + i"  v-if="i === enText.length - 1" :style="{float: 'right',overflow: 'hidden',color: item.isColor}" v-html="item.word"></span>
                  </template> -->
                  <p class="article-main-content">
                    <template v-for="(item,i) in voiceArr">
                      <template v-if="!item.word">
                      </template>
                      <template v-else-if="item.word.includes('&&')">
                        <span class="article-wrod" :key="'z' + i" v-html="item.word.replace('&&', '')" :style="{color: item.isColor, marginLeft: '40px'}"></span>
                      </template>
                      <template v-else-if="item.word.includes('##')">
                        <br :key="'z' + i + 'br'">
                      </template>
                      <template v-else>
                        <span class="article-wrod" :key="'z' + i" v-html="item.word" :style="{color: item.isColor}"></span>
                      </template>
                    </template>
                  </p>
                  <span :style="{display: 'block',width: '100%','text-align': 'right',overflow: 'hidden'}">
                  <template v-for="(item,i) in endArr">
                    <template v-if="!item.word">
                    </template>
                    <template v-else-if="item.word.includes('&&')">
                      <span class="article-wrod" :key="'e' + i" v-html="item.word.replace('&&', '')" :style="{color: item.isColor, marginLeft: '40px'}"></span>
                    </template>
                    <template v-if="item.word.includes('##')">
                      <br :key="'e' + i + 'br'">
                    </template>
                    <template v-else>
                      <span class="article-wrod" :key="'e' + i" v-html="item.word" :style="{color: item.isColor}"></span>
                    </template>
                  </template>
                  </span>
                </template>
                <template v-else-if="articleType === 3 || articleType === 4">
                  <span :style="{display: 'block', 'text-align': 'center',width: '100%'}">
                    <template v-for="(item,i) in headArr">
                      <template v-if="!item.word">
                      </template>
                      <template v-else-if="item.word.includes('&&')">
                        <span class="article-wrod" :key="'h' + i" v-html="item.word.replace('&&', '')" :style="{color: item.isColor, marginLeft: '40px'}"></span>
                      </template>
                      <template v-else-if="item.word.includes('##')">
                        <br :key="'h' + i + 'br'">
                      </template>
                      <template v-else>
                        <span class="article-wrod" :key="'h' + i" v-html="item.word" :style="{color: item.isColor}"></span>
                      </template>
                    </template>
                  </span>
                  <p class="article-main-content">
                    <template v-for="(item,i) in voiceArr">
                      <template v-if="!item.word">
                      </template>
                      <template v-else-if="item.word.startsWith('&&')">
                        <span class="article-wrod" :key="'z' + i" v-html="item.word.replace('&&', '')" :style="{color: item.isColor, marginLeft: '40px'}"></span>
                      </template>
                      <template v-else-if="item.word.includes('##')">
                        <br :key="'z' + i + 'br'">
                      </template>
                      <template v-else>
                        <span class="article-wrod" :key="'z' + i" v-html="item.word" :style="{color: item.isColor}"></span>
                      </template>
                    </template>
                  </p> 
                </template>
                <template v-else>
                  <p class="article-main-content">
                    <template v-for="(item,i) in voiceArr">
                      <template v-if="!item.word">
                      </template>
                      <template v-else-if="item.word.startsWith('&&')">
                        <span class="article-wrod" :key="'z' + i" v-html="item.word.replace('&&', '')" :style="{color: item.isColor, marginLeft: '40px'}"></span>
                      </template>
                      <template v-else-if="item.word.includes('##')">
                        <br :key="'z' + i + 'br'">
                      </template>
                      <template v-else>
                        <span class="article-wrod" :key="'z' + i" v-html="item.word" :style="{color: item.isColor}"></span>
                      </template>
                    </template>
                  </p>
                </template>
              </template>
              </div>
              <div class="read-main-item" v-if="isPlay">
                <img src="@/assets/composition/listen-icon.png" />
                <p class="tips">认真听读音</p>
              </div>
              <div class="read-main-audio" v-if="isPlay">
                <template v-if="personVoice">
                  <img src="@/assets/composition/myvideo-pause.png" v-if="!playing" @click="playVoice('play')"/>
                  <img src="@/assets/composition/myvideo-play.png" v-if="playing" @click="playVoice('pause')"/>
                  <span>{{ seekDuration | mmssFilter }}</span>
                  <a-slider class="voice-range" :value="sliderPercentage"></a-slider>
                  <span>{{ audioDuration | mmssFilter }}</span>
                </template>
                <template v-if="defaultVoice">
                  <img src="@/assets/composition/myvideo-pause.png" v-if="!defaultPlaying" @click="playVoice('play')"/>
                  <img src="@/assets/composition/myvideo-play.png" v-if="defaultPlaying" @click="playVoice('pause')"/>
                  <span :data-s="sliderPercentage1">{{ seekDuration1 | mmssFilter }}</span>
                  <a-slider class="voice-range" :value="sliderPercentage1"></a-slider>
                  <span>{{ audioDuration1 | mmssFilter }}</span>
                </template>
              </div>
            </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="scene" v-if="isVoice">
      <div class="scene-btn">
      <div class="scene-btn-item" id="yxp-enread-again" @click="realTimeAsrOpen">
        <img src="@/assets/composition/record-icon.png" class="audio-icon" />
        <span>再来一次</span>
      </div>
      <div class="scene-btn-item" id="yxp-enread-result" @click="handleNext">
        <span>测评结果</span>
        <img src="@/assets/word/no-next.png"/>
      </div>
    </div>
    </div>
    <div class="mark" v-if="isPoint || isModel || isEn"></div>
    <readPop :isPoint="isPoint" :content="content.analysis" @point="handlePoint" />
    <ScenePop :title="popTitle" :isEn="isEn" type="6" :id="id" :courseId="courseId" :project_voice="project_voice" :voiceRad="voiceRad" @closePop="handleClosePop" />
    <model :isModel="isModel" :enHead="enHead" :enEnd="enEnd" :enWord="enModel" :articleType="articleType" @model="handleModel" />
    <BackTips title="是否退出学习？" :isBack="isBack" :courseId="courseId" :courseType="course_type" type="1" @close="handleClosed"/>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import { uploadAudio } from '@/services/composition.js'
import { Slider } from "ant-design-vue"
import Recorder from 'recorder-core'
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
import readPop from '../components/readPop.vue'
import ScenePop from '../components/ScenePop.vue'
import model from '../components/model.vue'
import BackTips from '../components/BackTips.vue'
import Timetips from '@/components/Timetips.vue'
import storage from '@/utils/storage.js'
//import { randomArr } from '@/services/composition.js'
import { Howl } from "howler"
import { Cosinesimilarity, textDiff, textFormatArticl } from '@/utils/rand.js'
export default {
  name: 'enRead',
  components: {
    readPop,
    ScenePop,
    model,
    ASlider: Slider,
    BackTips,
    Timetips
  },
  data () {
    return {
      asrData: [],
      recIsOpen: false,
      BSync: null,
      isController: false,
      title: '格式塔情景植入',
      modelArr: ['要点解读', '查看模型'],
      content: '',
      popTitle: '开始文字表达训练吧~',
      id: '',
      courseId: 0,
      course_type: 0,
      isShow: false,
      isPoint: false,
      isBuffer: false,
      isBack: false,
      isEn: false,
      isVoice: false,
      isModel: false,
      isPlay: false, // 是否播放
      defaultPlaying: false,
      playing: false,
      personVoice: false,
      defaultVoice: false,
      model: 0,
      enText: [],
      enModel: [],
      enHead: '',
      enEnd: '',
      enRand: [],
      enWord: '',
      DB: 0,
      voice: 0,
      socket: null,
      audio: "",
      audio1: '',
      timer: null,
      type: '1',
      rec: null,
      wave: null,
      recBlob: null,
      recordTransformData: null,
      recordStarted: false,
      voiceResult: '',
      voiceModel: '',
      result: '',
      min_record: 0,
      max_record: 0,
      bufferDuration: 0,
      audioDuration: 0,
      seekDuration: 0,
      audioDuration1: 0,
      seekDuration1: 0,
      blob: null,
      articleType: 0,
      voiceRad: {
        fluency: 0, // 流畅度
        full: 0, // 完整度
        correct: 0
      },
      rad: 0,
      spec: 0,
      fluency: 0,
      readWord: [],
      readNum: 0,
      deacon_time: 0,
      isAllow: false,
      voiceArr: [],
      headArr: [],
      endArr: []
    }
  },
  computed: {
    sliderPercentage: function() {
      return this.seekDuration < 1 ? 0 : Math.ceil((this.seekDuration / this.audioDuration) * 93)+7;
    },
    sliderPercentage1: function() {
      return this.seekDuration1 < 1 ? 0 : Math.ceil((this.seekDuration1 / this.audioDuration1) * 93)+7;
    }
  },
  watch: {
    DB (newDb) {
      if (+newDb === 0) {
        this.voice = 0;
      } else if (newDb >= 1 && newDb <= 20) {
        // 显示一格音谱
        this.voice = 1;
      } else if (newDb >= 21 && newDb <= 40) {
        this.voice = 2;
        // 显示二格音谱
      } else if (newDb >= 41 && newDb <= 60) {
        this.voice = 3;
        // 显示三格音谱
      } else if (newDb >= 71 && newDb <= 90) {
        this.c = 4;
        // 显示四格音谱
      } else if (newDb >= 91 && newDb <= 120) {
        this.voice = 5;
        // 显示五格音谱
      } else if (newDb >= 121 && newDb <= 140) {
        this.voice = 6;
        // 显示六格音谱
      } else if (newDb >= 141 && newDb <= 160) {
        this.voice = 7;
        // 显示七格音谱
      } else if (newDb >= 161 && newDb <= 180) {
        this.voice = 8;
        // 显示八格音谱
      } else if (newDb >= 181 && newDb <= 200) {
        this.voice = 9;
        // 显示九格音谱
      } else if (newDb > 200) {
        this.voice = 10;
        // 显示全部音谱
      }
    }
  },
  created () {
    this.BSync = window.isBSync()
    this.isController = window.isController()
    this.realTimeAsrInit()
    if (this.$route.query.id) {
      let { id, course_type, courseId } = this.$route.query
      this.id = +id
      this.courseId = +courseId
      this.course_type = +course_type
    }
    let data = storage.get('sceneData')
    if (data) {
      this.content = data
      this.max_record = parseInt(data.max_record)
      this.min_record = parseInt(data.min_record)
      this.project_voice = data.en_voice
      this.articleType = data.type
      this.deacon_time = data.deacon_time
      let enText = data.sentence
      let enModel = data.sentence
      let head = enText[0]
      if (head.indexOf('##') === -1) {
        let head1 = head + '##'
        enText[0] = head1
      }
      if (this.articleType === 1 || this.articleType === 2 || this.articleType === 5) {
        if (enText[enText.length - 1].indexOf('##') !== -1) {
          let nr = (enText[enText.length - 1].split('##'))
          enText[enText.length - 1] = nr[0] + '  ##  ' + nr[1]
        }
      }
      let enWord = []
      let enArr = []
      let enRand = []
      this.enText = enText
      enModel.map((item,i) =>{
        let obj = {}
        let val = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          console.log(val1)
          val = val1.replace('##','<br>')
          obj.word = val
          obj.isStart = 0
          enRand.push(obj)
          enArr.push(obj)
          enWord.push(val)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          obj.word = val
          obj.isStart = 0
          enRand.push(obj)
          enArr.push(obj)
          enWord.push(val)
        } else if (item.indexOf('##') !== -1) {
          val = item.replace('##','<br>')
          obj.word = val
          obj.isStart = 1
          enRand.push(obj)
          enArr.push(obj)
          enWord.push(val)
        } else {
          val = item
          obj.word = val
          obj.isStart = 2
          enRand.push(obj)
          enArr.push(obj)
          enWord.push(val)
        }
      })
      this.enModel = enArr
    }
   
  },
  mounted() {
    this.voiceModel = ''
    // let result = textDiff(this.enText, this.voiceModel, this.articleType)
    // let resultHtml = textFormatArticl(result.otext, this.articleType)
    // console.log(resultHtml, result, '----resultHtml')
    // this.voiceArr = resultHtml.text
    // this.headArr = resultHtml.headArr
    // this.endArr = resultHtml.endArr
    let vm = this
    this.audio1 = new Howl({
            src: this.content.en_voice,
            html5: true,
            onplay: function() {
              vm.defaultPlaying = true;
              vm.seekTimer1 = setInterval(() => {
                vm.audioDuration1 = this.duration();
                vm.seekDuration1 = this.seek();
              }, 1000);
            },
            onload: function() {
              vm.seekDuration1 = 0
              vm.audioDuration1 = this.duration()
            },
            onpause: function() {
              vm.defaultPlaying = false;
            },
            onend: function() {
              console.log("end");
              vm.seekDuration1 = 0
              console.log(vm.seekDuration1 + '******)')
              vm.defaultPlaying = false;
              vm.isPlay = false
              clearInterval(vm.seekTimer1);
            }
          });
  },
  beforeDestroy () {
    clearInterval(this.seekTimer)
    clearInterval(this.seekTimer1)
    if (this.audio) {
      this.audio.stop()
    }
    if (this.audio1) {
      this.audio1.stop()
    }
    this.isStop = false
    if (this.rec !== null) {
      this.realTimeAsrStop()
      this.rec = null
    }
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  methods: {
    handleScene () {
      this.isShow = true
    },
    realTimeAsrInit () {
      let that = this
      !this.rec && (this.rec = Recorder({
        type: 'mp3',
        sampleRate: 16000,
        bitRate: 16,
        bufferSize: 4096,
        onProcess: (buffers, powerLevel, bufferDuration, bufferSampleRate) => {
          // console.log(bufferDuration + '******')
          this.recordTransformData = Recorder.SampleData(buffers, bufferSampleRate, 16000, {
            index: this.recordTransformData ? this.recordTransformData.index: 0,
            offset: this.recordTransformData ? this.recordTransformData.offset: 0.0,
          });
          // 业务处理-start
          let buffer = buffers[buffers.length-1]
          var maxVal = 0;
          for (var i = 0; i < buffer.length; i++) {
              if (maxVal < buffer[i]) {
                  maxVal = buffer[i];
              }
          }
          this.DB = parseInt(maxVal / 100);
          // 业务处理-end
          this.socket.send(this.recordTransformData.data)
          if (bufferDuration / 1000 > this.min_record) {
            this.isStop = false
          }
          if (bufferDuration / 1000 >= this.max_record) {
            this.asrSyncStopEvent()
          }
        }
      }))
      if(!that.isController){
        that.BSync && that.BSync.socket.on('sync:socket', function (data) {
          that.realTimeAsrMessage(data)
        })
        that.BSync && that.BSync.socket.on('sync:cmd', function (data) {
          data.cmd && eval(`typeof ${data.cmd} == 'function' && ${data.cmd}(data)`)
        })
      }
      this.realTimeAsrOpen(false)
    },
    _realTimeAsrOpen () {
      console.log('正在启动转写')
      this.voiceModel = ""
      if (this.audio) {
        this.audio.unload()
        clearInterval(this.seekTimer);
      }
      let that = this
      this.socket = new WebSocket(`wss://vop.baidu.com/realtime_asr?sn=${new Date().getTime()}`, 'websocket')
      this.socket.addEventListener('open', () => {
        this.socket.send(JSON.stringify({
          "type": "START",
          "data": {
            "appid": 21812587,
            "appkey": "WzgLZY1Ico79HSU6fzzsG9Ic",
            "dev_pid": 17372,
            "cuid": "cuid-1",
            "format": "pcm",
            "sample": 16000
          }
        }))
        this.DB = 0
        this.isBuffer = true
        this.isVoice = false
        this.isStop = true
        this.readNum = 0
        this.voiceModel = ''
        this.voiceResult = ''
        this.rec.start()
      })
      if(that.isController){
        this.socket.addEventListener('message', (msgevt) => {
          console.log(msgevt)
          console.log("()((((((((((((((((((((((((((")
          let data = msgevt.data
          if(data){
            data = JSON.parse(data)
            if(data.err_no == 0){
              that.BSync && that.BSync.socket.emit('sync:socket', data)
              that.realTimeAsrMessage(data)
            }
          }
        })
      }
      this.socket.addEventListener('close', (e) => {
        if (e.target.url === this.socket.url) {
          this.asrSyncStopEvent()
        }
        console.log('关闭连接', e)
      })
    },
    _realTimeAsrMessage (data) {// 业务处理
      console.log('业务处理.识别数据', data)
      this.voiceModel = data.join(' ')
      this.voiceResult = data.join(',')
    },
    realTimeAsrMessage (data) {
      console.log('原始数据', data)
      this.asrData[this.asrData.length == 0 ? 0 : (this.asrData.length - 1)] = data.result
      if(data.type == 'FIN_TEXT'){
        this.asrData[this.asrData.length] = ''
      }
      this._realTimeAsrMessage(this.asrData)
    },
    asrSyncStopEvent () {
      let that = this
      // 传递关闭事件
      if(that.isController){
        that.BSync && that.BSync.socket.emit('sync:cmd', {
          cmd: 'that.realTimeAsrStop'
        })
        that.realTimeAsrStop()
      }
    },
    realTimeAsrStop () {
      // 加锁
      // if (this.bufferDuration / 1000 < this.min_record && this.isStop) {
      //   this.$toast('录音时间太短哦~')
      //   return
      // }
      if(this.recordTransformData){
        let that = this
        this.recordTransformData = null
        this.isBuffer = false
        this.isVoice = true
        this.voiceResult = ''
        console.log(this.voiceModel, '-------------voice Modal')
        this.isComplete = true
        this.isStop = false
        this.rec.stop((blob, duration) => {
          let form = new FormData()
          form.append("file",blob,"recorder.mp3")
          form.append("type", 'essay')
          uploadAudio(form).then(res => {
            if (res.code === 1) {
              this.project_voice = res.data.path
              let readWord = []
              let readNum = 0
              let result = textDiff (this.enText, this.voiceModel, this.articleType)
              let resultHtml = textFormatArticl(result.otext, this.articleType)
              this.voiceArr = resultHtml.text
              this.headArr = resultHtml.headArr
              this.endArr = resultHtml.endArr
              this.voiceRad.full = result.full
              this.voiceRad.correct = result.correct
              // let t = duration / 1000 / this.deacon_time
              // if (t >= 1) {
              //   this.voiceRad.fluency = parseInt(this.voiceRad.correct) === 0 ? Number(0).toFixed(2) : (this.voiceRad.full * this.voiceRad.correct / (duration / 1000 / this.deacon_time) / 100).toFixed(2)
              // } else {
              //   this.voiceRad.fluency = parseInt(this.voiceRad.correct) === 0 ? Number(0).toFixed(2) : (this.voiceRad.full * this.voiceRad.correct * (duration / 1000 / this.deacon_time) / 100).toFixed(2)
              // }
              // 流畅度计算
              let tmpFull = +this.voiceRad.full, isMax = false, perferTime = this.deacon_time*+result.correct/100, fluency = 0, _duration = duration / 1000
              isMax = perferTime >= _duration
              if(+result.correct > 0 && +result.full > 0){
                if(tmpFull >= 80){
                  if(isMax) fluency = 100-Math.abs(perferTime-_duration)*20/perferTime
                  else fluency = 80+Math.abs(perferTime-_duration)*20/_duration
                }else if(tmpFull >= 60){
                  if(isMax) fluency = 80-Math.abs(perferTime-_duration)*20/perferTime
                  else fluency = 60+Math.abs(perferTime-_duration)*20/_duration
                }else if(tmpFull >= 40){
                  if(isMax) fluency = 60-Math.abs(perferTime-_duration)*20/perferTime
                  else fluency = 40+Math.abs(perferTime-_duration)*20/_duration
                }else{
                  if(isMax) fluency = 40-Math.abs(perferTime-_duration)*20/perferTime
                  else fluency = 20+Math.abs(perferTime-_duration)*20/_duration
                }
              }
              this.voiceRad.fluency = fluency.toFixed(2)
              
              console.log(result, '======result')
              // this.enText.map(item => {
              //   let obj = {}
              //   let sp = 0
              //   let sp1 = 0
              //   let ta = 0
              //   if (this.voiceModel.indexOf(item.word) > -1) {
              //     sp1 = 100
              //   } else {
              //     for(let t of that.asrData){
              //       ta = Cosinesimilarity(t, item.word)
              //       sp1 = Math.max(sp1, ta)
              //       // console.log(888, sp1, ta, t, item.word)
              //     }
              //     // sp1 = Cosinesimilarity(this.voiceModel, item.word)
              //     // sp = strSimilarity2Percent(this.voiceModel, item.word) * 100
              //   }
              //   // console.log(sp + '------')
              //   console.log(sp1 + '****&&&')
              //   if (sp1 > 35) {
              //     obj.isRead = true
              //     this.readNum++
              //   }
              //   if (sp1 > 50 && sp1 < 85) {
              //     obj.isColor = '#FF9D00'
              //   } else if (sp1 <= 50) {
              //     obj.isColor = '#FD3462'
              //   } else {
              //     obj.isColor = '#11AA8E'
              //   }
              //   obj.word = item.word
              //   obj.isStart = item.isStart
              //   readWord.push(obj)
              // })
              // this.asrData = []
              // console.log(readWord)
              // this.enText = readWord
              // console.log(this.enText)
              // console.log(this.readNum + '***')
              // this.voiceRad.full = ((this.readNum / this.enText.length) * 100).toFixed(2)
              // console.log(duration + '===========' + this.deacon_time)
              // this.voiceRad.fluency = parseInt(this.voiceRad.correct) === 0 ? Number(0).toFixed(2) : (this.voiceRad.full * this.voiceRad.correct / (duration / 1000 / this.deacon_time) / 100).toFixed(2)
              let vm = this;
              console.log('-----------再次录音')
              this.audio = new Howl({
                src: this.project_voice,
                html5: true,
                onplay: function() {
                  //sound playing
                  vm.playing = true;
                  vm.seekTimer = setInterval(() => {
                    vm.audioDuration = this.duration();
                    vm.seekDuration = this.seek();
                  }, 1000);
                },
                onload: function() {
                  // vm.seekDuration = 0
                  vm.audioDuration = this.duration();
                },
                onpause: function() {
                  vm.playing = false;
                },
                onend: function() {
                  console.log("end");
                  vm.seekDuration = 0
                  clearInterval(vm.seekTimer);
                  vm.playing = false;
                  vm.isPlay = false
                }
              });
            } else {
              this.$toast(res.info)
            }
          })
        })
      }
    },
    realTimeAsrOpen (asr = true) {
      if (this.isAllow) {
        this.$toast('请先打开麦克风')
        return
      }
      if (this.playing || this.defaultPlaying) {
        this.$toast('请先暂停播放读音')
        return
      }
      // 加锁
      if(this.recordTransformData) return false
      console.log('正在打开录音组件')
      this.asrData = []
      if(this.recIsOpen){
      // 重新录音先把已经录制的 清除，避免显示之前的 体验不好
        this.voiceArr = []
        this.headArr = []
        this.endArr = []
        if(asr) return this._realTimeAsrOpen()
        else return false
      }
      this.rec.open(success => {
        console.log('rec.open', success)
        this.recIsOpen = true
        if(this.recIsOpen){
          if(asr) return this._realTimeAsrOpen()
          else return false
        }
      }, (msg, isUserNotAllow) => {//用户拒绝未授权或不支持
          this.isAllow = isUserNotAllow
          console.log(msg + '&' + isUserNotAllow)
          this.$toast("请先打开麦克风");
      })
    },
    handleChangeModel (i) {
      this.model = i
      if (i === 0) {
        this.isPoint = true
      } else if (i === 1) {
        this.isModel = true
      }
    },
    handlePoint (val) {
      this.isPoint = val
    },
    handleModel (val) {
      this.isModel = val
    },
    handleNext () {
      this.isEn = true
    },
    handleBack () {
      this.isBack = true
    },
    // 播放语音
    handlePlay (type) {
      console.log(type)
      this.isPlay = true
      if (type === 1) {
        this.personVoice = true
        this.defaultVoice = false
        if (this.audio1) {
          this.audio1.pause()
        }
        if (!this.playing) {
          this.playing = true
          this.defaultPlaying = false
          this.audio.play()
        } 
      } else {
        this.defaultVoice = true
        this.personVoice = false
        if (this.audio) {
          this.audio.pause()
        }
        
        if (!this.defaultPlaying) {
          this.playing = false
          this.defaultPlaying = true
          this.audio1.play()
        }
      }
      
    },
    playVoice (status) {
      this.isPlay = false
      if (status === 'play') {
        if (this.personVoice) {
          this.audio.play()
        } else {
          this.audio1.play()
        }
      } else {
        if (this.personVoice) {
          this.audio.pause()
          this.playing = false
        } else {
          this.audio1.pause()
          this.defaultPlaying = false
        }
      }
    },
    handleClosePop (val) {
      this.isEn = val
    },
    handleClosed (val) {
      this.isBack = val
    }
  }
}
</script>
<style lang="less" scoped>
.retell-box {
  height: calc(100% - 120px) !important;
  overflow: auto;
}
.yxp-composition-top {
    .yxp-top-r {
      color: #27BFA3;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      .right-text-item {
        cursor: pointer;
        &:last-child {
          margin-left: 60px;
        }
      }
    }
  }

.record {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 150px;
      text-align: center;
      background: #fff;
      opacity: .95;
      cursor: pointer;
      &-item {
        img {
          width: 80px;
          height: 80px;
          margin-top: 35px;
        }
        &-text {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #27BFA3;
        }
      }
     }
.scene-btn {
    justify-content: space-between;
  }
  @media screen and (max-width: 1200px) {
    .scene-btn {
      &-item {
        &:first-child {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          img {
            width: 60px;
            height: 60px;
            margin-top: 10px;
          }
          span {
            display: inline-block;
            height: 60px;
            line-height: 60px;
          }
        }
      }
    }
  }
  @media screen and (min-width: 1200px) {
    .scene-btn {
      &-item {
        &:first-child {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          img {
            width: 80px;
            height: 80px;
            margin-top: 10px;
          }
          span {
            display: inline-block;
            height: 80px;
            line-height: 80px;
          }
        }
      }
    }
  }
.content-wrap {
  padding-top: 22px !important;
  .work-title {
    padding-top: 0;
  }
  .read-quite {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 640px;
        &-item {
          text-align: center;
          .num {
            font-size:20px;
            font-family:Microsoft YaHei;
            font-weight:bold;
            color: #27BFA3;
            em {
             font-size: 14px;
             font-weight: 400;
            }
          }
          .text {
            font-size:20px;
            font-weight:400;
            color: #27BFA3;
            display: flex;
            align-items: center;
            img {
              display: inline-block;
              vertical-align: middle;
              width: 24px;
              height: 24px;
              margin-right: 10px;
            }
          }
        }
      }
      .read-play {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #D9DFE5;
        border-radius: 6px;
        padding: 20px 0;
        width: 640px;
        margin-top: 20px;
        &-item {
          display: flex;
          justify-content: center;
          align-items: center;
          &:first-child {
            margin-right:50px
          }
        }
        .left-item {
          display: flex;
          align-items: center;
          font-size:16px;
          font-family:Microsoft YaHei;
          font-weight:400;
          color: #333;
          img {
            width: 22px;
            height: 22px;
            margin-right: 10px;
          }
          &:first-child {
            margin-right: 20px;
          }
        }
        .right-item {
          display: flex;
          align-items: center;
          font-size:14px;
          font-family:Microsoft YaHei;
          font-weight:400;
          margin-right: 20px;
          .dot {
            width: 10px;
            height: 10px;
            background: #11AA8E;
            border-radius: 5px;
            margin-right: 5px;
          }
          .text {
            line-height: 24px;
          }
          &:nth-child(1) {
            color: #11AA8E;
          }
          &:nth-child(2) {
            color: #FF9D00;
            .dot {
              background: #FF9D00;
            }
          }
          &:nth-child(3) {
            color: #FD3462;
            margin-right: 0;
            .dot {
              background: #FD3462;
            }
          }
        }
      }
      .read-main {
        color: #11AA8E;
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:400;
        margin-top: 20px;
        span {
          word-break: break-word;
        }
        .article-wrod {
          padding: 0 3px;
          display: inline-block;
        }
        &-item {
          text-align: center;
          margin-top: 100px;
          img {
            display: block;
            width: 92px;
            height:70px;
            margin: 0 auto;
          }
          .tips {
            font-size:20px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #27BFA3;
            margin-top: 26px;
          }
        }
        &-audio {
          position: absolute;
          left: 50%;
          bottom: 60px;
          transform: translateX(-50%);
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            margin-right: 20px;
          }
          span {
            font-size:16px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color: #27BFA3;
            min-width: 48px;
          }
          .voice-range {
            width: 480px; /* no */
            margin: 0 10px;
          }
          // .slider {
          //   position:relative;
          //   width: 486px;
          //   height: 20px;
          //   border: 1px solid #25B59A;
          //   border-radius: 10px;
          //   margin-left: 10px;
          //   margin-right: 10px;
          //   &-step {
          //     position: absolute;
          //     left: -1px;
          //     top: -1px;
          //     width: 20px;
          //     height: 20px;
          //     background: #27BFA3;
          //     border-radius: 10px;
          //   }
          // }
        }

      }
}
.scene-wrap {
  position: fixed;
  left: 0;
  top: 80px;
  width: 100%;
  height: 100%;
  background: url(../../../assets/yxp-bg.png) no-repeat;
  background-size: cover;
  .contrast {
    .scene-content {
      height: 600px !important;
      .content {
        height: 600px !important;
      }
    }
  }
  .voice-box {
    display: flex;
    justify-content: center;
    padding: 30px 95px;
    .scene-content {
      position: relative;
      width: 800px;
      height: 650px;
      background: #fff;
      margin: 0 auto;
      overflow: hidden;
      .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .model-title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333;
      padding-top: 30px;
     }
    .last-item {
      padding: 30px 30px 0 !important;
     
    }
    .content {
      position: relative;
      height: 100%;
      overflow: auto;
      text-align: left;
      padding: 50px 30px 0;
      border-radius: 10px;
      
      .date {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        padding-bottom: 20px;
      }
      &-des {
        padding-bottom: 160px;
        .ask-title {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333;
          text-align: center;
          padding-top: 30px;
          padding-bottom: 30px;
        }
        .info {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333;
          padding-top: 20px;
        }
      }
    }
    .record {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 150px;
      text-align: center;
      background: #fff;
      opacity: .95;
      cursor: pointer;
      &-item {
        &:first-child {
          margin-right: 90px;
        }
        img {
          width: 40px;
          height: 40px;
          margin-top: 35px;
        }
        &-text {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #27BFA3;
          margin-top: 10px;
        }
      }
     }
      &::after {
        position: absolute;
        left: -20px;
        top: 30px;
        display: block;
        content: '';
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 10px solid #fff;
        border-bottom: 10px solid transparent;
        border-left: 10px solid transparent;
      }
    }
  }
  .scene-box {
    position: relative;
    width: 800px;
    height: 650px;
    background: #fff;
    margin: 30px auto;
    overflow: hidden;
  }
  .scene-content {
    height: 100%;
    // overflow: auto;
    .title {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 60px;
      background: #fff;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333;
      padding-top: 30px;
    }
    .content {
      height: 100%;
      text-align: left;
      padding: 80px 84px 20px;
      overflow: auto;
    }
    .record {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 150px;
      text-align: center;
      background: #fff;
      opacity: .95;
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
        margin-top: 35px;
      }
      &-text {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #27BFA3;
        margin-top: 10px;
      }
    }
  }
}

  .buffer {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 340px;
    height: 190px;
    background: #E7F2EF;
    border-radius: 10px;
    z-index: 20;
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
      margin-top: 30px;
      span {
        display: inline-block;
        width: 2px;
        background: #47CBB3;
        border-radius: 1px;
        margin-right: 5px;
        &:nth-child(1) {
          height: 20px;
        }
        &:nth-child(2) {
          height: 24px;
        }
        &:nth-child(3) {
          height: 28px;
        }
        &:nth-child(4) {
          height: 32px;
        }
        &:nth-child(5) {
          height: 36px;
        }
        &:nth-child(6) {
          height: 36px;
        }
        &:nth-child(7) {
          height: 32px;
        }
        &:nth-child(8) {
          height: 28px;
        }
        &:nth-child(9) {
          height: 24px;
        }
        &:nth-child(10) {
          height: 20px;
        }
      }
    }
    &-btn {
      position: fixed;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      width: 200px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      font-size:20px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color: #fff;
      background:linear-gradient(360deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
      box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      border-radius: 100px;
    }
  }
</style>
